<template>
  <el-dialog :visible.sync="isShow" :title="headerTitle"   @close="handleClose"  center top="14vh" width="400px" append-to-body :fullscreen="fullscreen">
    <el-form :model="dialogForm" size="small" label-suffix=":"  ref="detailForm" :rules="rules" label-width="100px">
          <!--              用户组名-->
          <el-form-item label="用户组名" prop="groupName">
            <el-input
              v-model="dialogForm.groupName"
              :placeholder="$t('public.placeholder',{placeholder: '用户组名'})"
            />
          </el-form-item>
         <!--              厂区选择-->
          <el-form-item label="厂区选择" prop="factoryName">
            <!-- <el-autocomplete
              style="width:100%"
              popper-class="my-autocomplete"
              v-model="dialogForm.factoryName"
              :fetch-suggestions="materialRemoteMethod"
              placeholder="请选择厂区"
              @select="handleFactorySelect">
              <i
                class="el-icon-search el-input__icon"
                slot="suffix"
              >
              </i>
              <template slot-scope="{ item }">
                {{ item.factoryName }}
              </template>
            </el-autocomplete> -->
            <el-select
            v-model="dialogForm.factoryName"
            filterable
            size="small"
            style="width:100%"
            reserve-keyword
            placeholder="请选择厂区">
            <el-option
                v-for="(item,index) in materialOptions"
                :key="index"
                :label="item.factoryName"
                :value="item.factoryName">
            </el-option>
        </el-select>
          </el-form-item>
          <!--  -->
          <el-form-item label="负责区域" prop="territory">
            <el-input
              v-model="dialogForm.territory"
              type="textarea"
              placeholder="请输入负责区域"
              :autosize="{minRows: 4, maxRows: 4}"
              :style="{width: '100%'}"
            />
          </el-form-item>
          <!--              描述信息-->
          <el-form-item label="描述信息" prop="description">
            <el-input
              v-model="dialogForm.description"
              type="textarea"
              placeholder="请输入"
              :autosize="{minRows: 4, maxRows: 4}"
              :style="{width: '100%'}"
            />
          </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" :loading="loading" icon="el-icon-document" size="small">{{$t('public.save')}}</el-button>
    </div>
  </el-dialog>
</template>
<script>

// import {listAllGaugeMessage } from "@/api/basic/gaugeMessage";
// import { addGauge ,modGauge} from "@/api/basic/gauge";
// import {updateSupplier  } from "@/api/basic/supplier";
// import EnjoySelectUser from "@/components/EnjoySelectUser";
// import EnjoySelectDeptTree from "@/components/EnjoySelectDeptTree";
// import FileUploadInput from "@/components/FileUploadInput";
import {listALLFactory} from "@/api/basic/factory";
import {addUerGroup, editUerGroup} from "@/api/system/userGroup";

export default {
  name: 'mtool-detial',
  // components:{EnjoySelectUser,EnjoySelectDeptTree,FileUploadInput},
  dicts: [
    'NYIQC_SUPPLIER_TYPE', //供应商类型
  ],
  props:{
    value:{
      type:Object
    },
    visible:{
      type:Boolean,
      default:false
    },
    type:[String,Number] //1:新增  2：编辑 3：查看
  },
  watch: {
    value(val) {
      console.log("gouxuan",val);

      this.dialogForm = {...val};
      this.getFactorySelect();
    }
  },
  computed:{
    isShow:{
      get(){return this.visible},
      set(){},
    },
    headerTitle(){
      const {type} = this
      let title = ""
      if(type == 1){
        title = '添加用户组'
      }
      if(type == 2){
        title = '编辑用户组'
      }
      // if(type == 3){
      //   title = this.$t('mtool.viewHeader')
      // }
      return title;
    }
  },
  data(){
    return {
      loading:false,
      fullscreen: false,
      deviceOptions:undefined,
      supplierOptions:undefined,
      dialogForm:{},
      restaurants: [],
      timeout:  null,
      // 表单校验
      rules: {
        groupName: [
          { required: true, message: "用户组名不能为空", trigger: "blur" }
        ],
        factoryName: [
          {
            required: true, message: "厂区名称不能为空",
            trigger: 'blur'
          }
        ],
      },
      materialOptions:[]
    }
  },
  methods:{
    /** 发起提交 */
    submitForm: function() {
      this.$refs.detailForm.validate(valid => {
        if (valid) {
          this.loading = true;
          if(this.type == 1){
            addUerGroup(this.dialogForm).then(res=>{
              this.loading = false
              if(res.code == 200){
                this.$emit('refresh')
                this.$modal.msgSuccess("操作成功!");
                this.$emit('update:visible',false)
              }else{
                this.$modal.msgError(res.msg);
              }
            }).catch(err => {
              this.loading = false
            })
          }else if(this.type == 2){
            editUerGroup({
              deleteFlag:this.dialogForm.deleteFlag,
              description:this.dialogForm.description,
              factoryName:this.dialogForm.factoryName,
              fileId:this.dialogForm.fileId,
              groupName:this.dialogForm.groupName,
              id:this.dialogForm.id,
              params:this.dialogForm.params,
              remark:this.dialogForm.remark,
              searchValue:this.dialogForm.searchValue,
              territory:this.dialogForm.territory,
            }).then(res=>{
              this.loading = false
              if(res.code == 200){
                this.$emit('refresh')
                this.$modal.msgSuccess("操作成功!");
                this.$emit('update:visible',false)
              }else{
                this.$modal.msgError(res.msg);
              }
            }).catch(err => {
              this.loading = false
            })
          }
        }
      })
    },
    handleClose(done) {
      this.$refs['detailForm'].resetFields();
      this.$emit('update:visible',false)
    },
    getFactorySelect(){
      listALLFactory().then(res=>{
        this.materialOptions = res.data
      })
    },
    materialRemoteMethod(val,cb){
      let restaurants = this.restaurants;
        let results = val ? restaurants.filter(this.createStateFilter(val)) : restaurants;
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 1000 * Math.random());
    },
    createStateFilter(queryString) {
        return (state) => {
          return (state.factoryName.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
    },
    //工厂模糊查询
    factoryRemoteMethod(val,cb){
      listALLFactory({factoryName:val}).then(res=>{
        this.factoryOptions = res.data.map(i=>i.deviceName)
        cb(res.data)
      })
    },
    handleFactorySelect(e){
      this.dialogForm.factoryName = e.factoryName
      this.$refs.detailForm.validateField('factoryName');

    },
    handleFactoryBlur(e){
      const { factoryOptions, dialogForm } = this
      if(!factoryOptions.includes(dialogForm.factoryName)){
        this.dialogForm.factoryName = ""
      }
    },
    //设备模糊查询
    // deviceRemoteMethod(val,cb){
    //   console.log(val)
    //   listAllGaugeMessage({deviceName:val}).then(res=>{
    //     this.deviceOptions = res.data.map(i=>i.deviceName)
    //     cb(res.data)
    //   })
    // },
    // handleDeviceSelect(e){
    //     this.dialogForm.deviceName = e.deviceName
    //   this.dialogForm.gaugeType = e.gaugeType
    //     this.$refs.deviceName.$emit("el.form.blur");
    // },
    // handleDeviceBlur(e){
    //   const { deviceOptions,dialogForm } = this
    //   if(!deviceOptions.includes(dialogForm.deviceName)){
    //     this.dialogForm.deviceName = ""
    //   }
    // },
    // //工厂模糊查询
    // supplierRemoteMethod(val,cb){
    //   listALLSupplier({supplierName:val}).then(res=>{
    //     this.supplierOptions = res.data.map(i=>i.deviceName)
    //     cb(res.data)
    //   })
    // },
    // handleSupplierSelect(e){
    //   this.dialogForm.supplierName = e.supplierName
    //   this.$refs.supplierName.$emit("el.form.blur");
    //
    // },
    // handleSupplierBlur(e){
    //   const { supplierOptions, dialogForm } = this
    //   if(!supplierOptions.includes(dialogForm.supplierName)){
    //     this.dialogForm.supplierName = ""
    //   }
    // },
    // handleExpireTime(e){
    //   console.log(e)
    //   const today = new Date().getTime()
    //   const val = new Date(e).getTime()
    //     if(val > today){
    //       this.dialogForm.remDay = ~~((val-today)/1000/60/60/24).toFixed(1)
    //     }else{
    //       this.dialogForm.remDay = 0
    //     }
    //   this.$forceUpdate()
    // },
    // handleRespName(e){
    //   this.dialogForm.respName = e.name
    // },
    // handleEmployName(e){
    //   this.dialogForm.employName = e.name
    // },
    // handleRespDept(e){
    //   this.dialogForm.respDept = e.name
    // }
  }
}
</script>

<style scoped>

</style>
